<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../font/iconfont.css">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      body {
         background-color: #eee;
      }

      i {
         font-size: 15px;
         color: #62676F;
      }

      input {
         outline: none;
      }

      #phone,
      #password,
      #othersex-content {
         outline: none;
         border: 1px solid #ccc;
         height: 35px;
         border-radius: 5px;
         padding: 0 8px;
         box-sizing: border-box;
         margin-bottom: 12px;
      }

      .root {
         width: 380px;
         height: 550px;
         background-color: #fff;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
         border-radius: .625rem;
      }

      .title {
         width: 100%;
         text-align: center;
         padding: 12px 0;
         border-bottom: 1px solid #ccc;
         margin-bottom: 8px;
      }

      .title p {
         font-size: 13px;
         color: gray;
      }

      .formtable {
         width: 93%;
         margin: 0 auto;
         padding: 8px 0;
      }

      .account {
         display: flex;
         justify-content: space-between;
         margin-bottom: 15px;
      }

      .surname,
      .firstname {
         height: 35px;
         box-sizing: border-box;
         border: 1px solid #ccc;
         border-radius: 5px;
         padding-right: 5px;
      }

      #sur-child,
      #first-child {
         width: 147px;
         height: 100%;
         padding-left: 8px;
         box-sizing: border-box;
         border-radius: 5px;
         border: 0;
      }


      .phone,
      .password {
         display: flex;
         height: 35px;
         align-items: center;
         justify-content: space-between;
         padding-right: 5px;
         border-radius: 5px;
         border: 1px solid #ccc;
         margin-bottom: 15px;
      }

      #phone-child,
      #password-child {
         border: none;
         flex-grow: 1;
         height: 100%;
         padding-left: 8px;
         border-radius: 5px;
      }

      .birthdate,
      .sex {
         display: flex;
         padding: 3px 0;
         margin-bottom: 8px;
      }

      .birth,
      .male {
         span {
            display: inline-flex;
            color: gray;
            font-size: 13px;
            align-items: center;
         }
      }


      .year,
      .month,
      .day {
         flex: 1;
         outline: none;
         height: 28px;
         border-radius: 5px;
         border: 1px solid #ccc;
         margin-right: 10px;
      }

      .day {
         margin-right: 0;
      }

      .sex span {
         display: flex;
         flex: 1;
         align-items: center;
         justify-content: space-between;
         height: 28px;
         padding: 0 8px;
         margin-right: 10px;
         border: 1px solid #ccc;
         background-color: #fff;
         border-radius: 5px;
         font-size: 13px;
      }

      #othersex-content {
         display: none;
         width: 100%;
         box-sizing: border-box;
      }

      #important {
         color: gray;
         font-size: 11px;
      }

      .footer {
         width: 100%;
         padding-top: 18px;
         text-align: center;
      }

      #register {
         width: 150px;
         height: 30px;
         background-color: #5AA130;
         outline: none;
         border: none;
         border-radius: 5px;
         color: white;
         font-weight: 600;
      }

      #to-login {
         color: #23A7F2;
         font-size: 13px;
         margin-top: 10px;
         display: block;
         text-decoration: none;
      }

      .err {
         border: 1px, solid, #DC362E;
      }

      #need {
         opacity: 0;
         color: #C22E31;
      }
   </style>
</head>

<body>
   <div class="root">
      <div class="title">
         <h2>创建新账户</h2>
         <p>快捷又简便</p>
      </div>
      <div class="formtable">
         <!-- 姓名 -->
         <div class="account">
            <div class="surname">
               <input type="text" id="sur-child" placeholder="姓" oninput="sur_name()">
               <i id="need" class="iconfont icon-gantanhao-yuankuang"></i>
            </div>
            <div class="firstname">
               <input type="text" id="first-child" placeholder="名" oninput="first_name()">
               <i id="need" class="iconfont icon-gantanhao-yuankuang"></i>
            </div>

         </div>

         <!-- 手机号邮箱，密码 -->
         <div class="phone">
            <input type="text" id="phone-child" placeholder="手机号或邮箱" oninput="ph_one()">
            <i id="need" class="iconfont icon-gantanhao-yuankuang"></i>
         </div>
         <div class="password">
            <input type="password" id="password-child" placeholder="创建密码" oninput="pass_word()">
            <i id="need" class="iconfont icon-gantanhao-yuankuang"></i>
         </div>

         <!-- 出生日期 -->
         <div class="birth">
            <span id="birth-child">出生日期</span>
            <i class="iconfont icon-wenhao"></i>
         </div>
         <div class="birthdate">
            <select class="year" onchange="createday()">
               <option>-</option>
            </select>
            <select class="month" onchange="createday()">
               <option value="1">-</option>
            </select>
            <select class="day">
               <option value="1">-</option>
            </select>
         </div>

         <!-- 性别 -->
         <div class="male">
            <span id="male-child">性别</span>
            <i class="iconfont icon-wenhao"></i>
         </div>
         <div class="sex">
            <span>
               <label for="male">男</label>
               <input type="radio" name="sex" class="thesex" id="male">
            </span>
            <span>
               <label for="female">女</label>
               <input type="radio" name="sex" class="thesex" id="female">
            </span>
            <span style="margin-right: 0;">
               <label for="female">自定义</label>
               <input type="radio" name="sex" class="thesex" id="othersex">
            </span>
         </div>
         <input type="text" name="othersex-content" id="othersex-content" placeholder="请输入您的性别">
         <p id="important">点击注册，即表示你同意接受我们的条款、隐私权政策和Cookie政策。你可能会收到我们的短信通知，并可以随时退订。</p>

         <div class="footer">
            <button id="register" onclick="checkdata()">注册</button>
            <a href="/login" id="to-login">有账户了？</a>
         </div>
      </div>
   </div>
</body>

<script>
   const $ = (ele) => {
      return document.querySelector(ele)
   }

   const maxmonth = [1, 3, 5, 7, 8, 10, 12]
   const surname = $('#sur-child')
   const firstname = $('#first-child')
   const phone = $('#phone-child')
   const password = $('#password-child')
   const register = $('#register')
   const othersex = $('#othersex')
   const othersexis = $('#othersex-content')
   const year = $('.year')
   const month = $('.month')
   const day = $('.day')
   const formInfo = {
      surname: {
         el: surname,
         rule: /^.+$/,
         warn: '姓名不能为空'
      },
      firstname: {
         el: firstname,
         rule: /^.+$/,
         warn: '姓名不能为空'
      },
      email: {
         el: phone,
         rule: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
         warn: '邮箱格式错误'
      },
      phone: {
         el: phone,
         rule: /^\d{11}$/,
         warn: '手机号格式错误'
      },
      password: {
         el: password,
         rule: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*_)[0-9a-zA-Z_]{6,16}$/,/*包含数字、字母和下滑线*/
         warn: '密码格式错误'
      }
   }

   /*----------渲染每月天数-----------*/
   window.onload = function () {
      for (var y = 0; y < 150; y++) {
         const opt = document.createElement('option')
         opt.innerText = 2024 - parseInt(y) + '年'
         year.appendChild(opt)
      }
      for (m = 1; m <= 12; m++) {
         const opt = document.createElement('option')
         opt.innerText = m + '月'
         month.appendChild(opt)
      }
   }

   document.querySelectorAll('.thesex').forEach(item => {
      item.addEventListener('change', customsex)
   })

   function adays(ds) {
      day.options.length = 0
      for (var d = 1; d <= ds; d++) {
         const opt = document.createElement('option')
         opt.innerText = d + '日'
         day.appendChild(opt)
      }
   }

   function createday(days) {
      var index = year.selectedIndex
      var index2 = month.selectedIndex
      const y = year.options[index].value.slice(0, -1)
      const m = month.options[index2].value.slice(0, -1)

      if (y === '-' || m === '-' || y === '' || m === '') {
         return
      }
      if ((((y % 4 === 0) && (y % 100 !== 0)) || (y % 400 === 0)) && m == 2) {
         adays(29)
      }
      else {
         if (m == 2) {
            adays(28)
         }
         else if (maxmonth.includes(Number(m))) {
            adays(31)
         }
         else {
            adays(30)
         }
      }
   }

   /*----------其他性别-----------*/
   function customsex() {
      if (othersex.checked) {
         othersexis.style.display = 'block'
         return
      }
      othersexis.style.display = 'none'
   }

   /*----------缺项警告-----------*/
   function warn(flag, elem) {
      if (flag) {
         elem.classList.add('err')
         elem.children[1].style.opacity = 1
         return false
      }
      elem.classList.remove('err')
      elem.children[1].style.opacity = 0
      return true
   }

   /*----------格式检查-----------*/
   function checkformat(dataObj) {
      if (dataObj.rule.test(dataObj.el.value)) {
         return true
      }
      return false
   }

   /*----------监听input-----------*/
   function sur_name() {
      return (warn(!checkformat(formInfo.surname), $('.surname')))
   }
   function first_name() {
      return (warn(!checkformat(formInfo.firstname), $('.firstname')))
   }

   function ph_one() {
      return (warn(!(checkformat(formInfo.email) || checkformat(formInfo.phone)), $('.phone')))
   }

   function pass_word() {
      return (warn(!checkformat(formInfo.password), $('.password')))
   }

   function getdata(flag, elem) {
      if (flag)
         return elem.value
      return null
   }

   /*----------注册按钮，获取数据-----------*/
   function checkdata() {
      const username1 = getdata(sur_name(), surname)
      const username2 = getdata(first_name(), firstname)
      const userphone = getdata(ph_one(), phone)
      const userpassword = getdata(pass_word(), password)

      if (username1 && username2 && userphone && userpassword) {
         const username = username1 + username2
         console.log(username, userphone, userpassword)
      }
   }

</script>

</html>